<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="QueryForm" label-width="120px">
      <el-form-item label="机器名称：">
        <el-input style="width: 300px" v-model="QueryForm.mch_name" clearable placeholder="请输入机器名称"></el-input>
      </el-form-item>
      <el-form-item label="机器ID：">
        <el-input style="width: 300px" v-model="QueryForm.mch_id" clearable placeholder="请输入机器ID"></el-input>
      </el-form-item>
      <el-form-item label="机器SN：">
        <el-input style="width: 300px" v-model="QueryForm.mch_sn" clearable placeholder="请输入机器SN"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="LoadData(true)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" :data="list" border fit
              element-loading-text="加载中···" highlight-current-row>
      <el-table-column prop="name" label="机器名称"></el-table-column>
      <el-table-column prop="id" label="机器ID"></el-table-column>
      <el-table-column prop="sn" label="机器SN"></el-table-column>
      <el-table-column label="是否在线">
        <template slot-scope="scope">
          <span style="color: #00aa15" v-if="scope.row.isOnLine === true">在线</span>
          <span style="color: #b30505" v-else>离线</span>
        </template>
      </el-table-column>
      <el-table-column prop="state_str" label="机器状态"></el-table-column>
      <el-table-column label="编辑信息" width="280px">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" plain @click="opensetpage(scope.row)">设置参数</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="QueryForm.page"
                     :page-size="QueryForm.pagesize" :total="total" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" title="设置参数" :visible.sync="setpagedialog" width="100%" top="5%"
               @close="clearsetpagedialogform">
      <el-form ref="setpagedialogform" :model="setpagedialogform" :rules="setpagedialogrule">
        <el-form-item label="升降机类型：" label-width="110px" style="width: 350px;margin: 0 auto 22px" prop="set_type">
          <el-select clearable v-model="setpagedialogform.set_type" placeholder="搜索项">
            <el-option label="石榴健康10台" :value="0"></el-option>
            <el-option label="布涛盒饭机" :value="1"></el-option>
            <el-option label="卖货升降机" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <div v-if="setpagedialogform.set_type===0||setpagedialogform.set_type===2">
          <div>
            <span>每层的高度位置</span>
            <el-divider></el-divider>
            <el-form-item label="ONE：" label-width="70px" prop="one" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.one" type="number" clearable/>
            </el-form-item>
            <el-form-item label="TWO：" label-width="70px" prop="two" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.two" type="number" clearable/>
            </el-form-item>
            <el-form-item label="THREE：" label-width="90px" prop="three" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.three" type="number" clearable/>
            </el-form-item>
            <el-form-item label="FOUR：" label-width="80px" prop="four" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.four" type="number" clearable/>
            </el-form-item>
            <el-form-item label="FIVE：" label-width="70px" prop="five" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.five" type="number" clearable/>
            </el-form-item>
            <el-form-item label="SIX：" label-width="60px" prop="six" style="width: 16%;float: left">
              <el-input v-model="setpagedialogform.six" type="number" clearable/>
            </el-form-item>
            <div class="clearfix"></div>
          </div>
          <div>
            <span>每层的水平位置 </span>
            <el-divider></el-divider>
            <el-form-item label="HR_ONE：" label-width="115px" prop="hR_ONE" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_ONE" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_TWO：" label-width="115px" prop="hR_TWO" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_TWO" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_THREE：" label-width="115px" prop="hR_THREE" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_THREE" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_FOUR：" label-width="115px" prop="hR_FOUR" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_FOUR" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_FIVE：" label-width="115px" prop="hR_FIVE" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_FIVE" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_SIX：" label-width="115px" prop="hR_SIX" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_SIX" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_SEVEN：" label-width="115px" prop="hR_SEVEN" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_SEVEN" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_EIGHT：" label-width="115px" prop="hR_EIGHT" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_EIGHT" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_NINE：" label-width="115px" prop="hR_NINE" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_NINE" type="number" clearable/>
            </el-form-item>
            <el-form-item label="HR_TEN：" label-width="115px" prop="hR_TEN" style="width: 20%;float: left">
              <el-input v-model="setpagedialogform.hR_TEN" type="number" clearable/>
            </el-form-item>
            <div class="clearfix"></div>
          </div>
          <div>
            <el-divider></el-divider>
            <el-form-item label="门的垂直距离：" label-width="150px" prop="door_ver_dis" style="width: 33.3%;float: left">
              <el-input v-model="setpagedialogform.door_ver_dis" type="number" clearable/>
            </el-form-item>
            <el-form-item label="门的水平探出距离：" label-width="150px" prop="door_hor_dis" style="width: 33.3%;float: left">
              <el-input v-model="setpagedialogform.door_hor_dis" type="number" clearable/>
            </el-form-item>
            <el-form-item label="掉货检测：" label-width="150px" prop="isdropcheck" style="width: 33.3%;float: left">
              <el-switch v-model="setpagedialogform.isdropcheck"
                         active-text="开" inactive-text="关"
                         :active-value="false" :inactive-value="true"></el-switch>
            </el-form-item>
            <el-form-item label="关门的倒计时：" label-width="150px" prop="door_closetime" style="width: 33.3%;float: left">
              <el-input v-model="setpagedialogform.door_closetime" type="number" clearable/>
            </el-form-item>
            <el-form-item label="容错步数：" label-width="150px" prop="fault_tolerance" style="width: 33.3%;float: left">
              <el-input v-model="setpagedialogform.fault_tolerance" type="number" clearable/>
            </el-form-item>
            <el-form-item label="总的上下步数：" label-width="150px" prop="total_step" style="width: 33.3%;float: left">
              <el-input v-model="setpagedialogform.total_step" type="number" clearable/>
            </el-form-item>
            <div class="clearfix"></div>
          </div>
        </div>
        <div v-if="setpagedialogform.set_type===1">
          <div style="width: 60%;margin: 0 auto">
            <el-form-item label="一层步数：" label-width="110px" prop="oneFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.oneFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="二层步数：" label-width="110px" prop="twoFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.twoFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="三层步数：" label-width="110px" prop="threeFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.threeFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="四层步数：" label-width="110px" prop="fourFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.fourFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="五层步数：" label-width="110px" prop="fiveFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.fiveFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="六层步数：" label-width="110px" prop="sixFloorStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.sixFloorStep" type="number" clearable/>
            </el-form-item>
            <el-form-item label="出货口步数：" label-width="110px" prop="outGoodsWindowsStep" style="width: 50%;float: left">
              <el-input v-model="setpagedialogform.outGoodsWindowsStep" type="number" clearable/>
            </el-form-item>
            <div class="clearfix"></div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setpagedialog = false">取 消</el-button>
        <el-button type="primary" @click="setpagedialogbtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      QueryForm: {
        mch_name: "",
        mch_id: "",
        mch_sn: "",
        isPage: true,
        page: 1,
        pagesize: 15
      },
      Loading: false,
      list: [],
      total: 0,
      setpagedialog: false,
      setpagedialogform: {
        set_type: '',//升降机类型
        mchid: '',//机器id
        one: '',//每层的高度位置set_type===0或2
        two: '',//每层的高度位置set_type===0或2
        three: '',//每层的高度位置set_type===0或2
        four: '',//每层的高度位置set_type===0或2
        five: '',//每层的高度位置set_type===0或2
        six: '',//每层的高度位置set_type===0或2
        hR_ONE: '',//每层的水平位置set_type===0或2
        hR_TWO: '',//每层的水平位置set_type===0或2
        hR_THREE: '',//每层的水平位置set_type===0或2
        hR_FOUR: '',//每层的水平位置set_type===0或2
        hR_FIVE: '',//每层的水平位置set_type===0或2
        hR_SIX: '',//每层的水平位置set_type===0或2
        hR_SEVEN: '',//每层的水平位置set_type===0或2
        hR_EIGHT: '',//每层的水平位置set_type===0或2
        hR_NINE: '',//每层的水平位置set_type===0或2
        hR_TEN: '',//每层的水平位置set_type===0或2
        door_ver_dis: '',//门的垂直距离set_type===0或2
        door_hor_dis: '',//门的水平探出距离set_type===0或2
        isdropcheck: true,//是否关闭掉货检测set_type===0或2
        door_closetime: '',//关门的倒计时set_type===0或2
        fault_tolerance: '',//容错步数set_type===0或2
        total_step: '',//总的上下步数set_type===0或2
        oneFloorStep: '',//一层步数set_type===1
        twoFloorStep: '',//二层步数set_type===1
        threeFloorStep: '',//三层步数set_type===1
        fourFloorStep: '',//四层步数set_type===1
        fiveFloorStep: '',//五层步数set_type===1
        sixFloorStep: '',//六层步数set_type===1
        outGoodsWindowsStep: '',//出货口步数set_type===1
      },
      setpagedialogrule: {
        set_type: [
          { required: true, message: '此项为必填项' }
        ],
        one: [
          { required: true, message: '此项为必填项' }
        ],
        two: [
          { required: true, message: '此项为必填项' }
        ],
        three: [
          { required: true, message: '此项为必填项' }
        ],
        four: [
          { required: true, message: '此项为必填项' }
        ],
        five: [
          { required: true, message: '此项为必填项' }
        ],
        six: [
          { required: true, message: '此项为必填项' }
        ],
        hR_ONE: [
          { required: true, message: '此项为必填项' }
        ],
        hR_TWO: [
          { required: true, message: '此项为必填项' }
        ],
        hR_THREE: [
          { required: true, message: '此项为必填项' }
        ],
        hR_FOUR: [
          { required: true, message: '此项为必填项' }
        ],
        hR_FIVE: [
          { required: true, message: '此项为必填项' }
        ],
        hR_SIX: [
          { required: true, message: '此项为必填项' }
        ],
        hR_SEVEN: [
          { required: true, message: '此项为必填项' }
        ],
        hR_EIGHT: [
          { required: true, message: '此项为必填项' }
        ],
        hR_NINE: [
          { required: true, message: '此项为必填项' }
        ],
        hR_TEN: [
          { required: true, message: '此项为必填项' }
        ],
        door_ver_dis: [
          { required: true, message: '此项为必填项' }
        ],
        door_hor_dis: [
          { required: true, message: '此项为必填项' }
        ],
        isdropcheck: [
          { required: true, message: '此项为必填项' }
        ],
        door_closetime: [
          { required: true, message: '此项为必填项' }
        ],
        fault_tolerance: [
          { required: true, message: '此项为必填项' }
        ],
        total_step: [
          { required: true, message: '此项为必填项' }
        ],
        oneFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        twoFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        threeFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        fourFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        fiveFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        sixFloorStep: [
          { required: true, message: '此项为必填项' }
        ],
        outGoodsWindowsStep: [
          { required: true, message: '此项为必填项' }
        ],
      },
    };
  },
  created: function () {
    this.LoadData();
  },
  methods: {
    //获取所有机器
    LoadData(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.$post(this.$api + "/get_Mch_pagelist", this.QueryForm)
          .then((data) => {
            if (data.code === 0) {
              this.list = data.rows;
              this.total = data.total
            } else {
              this.$notify({
                title: '提示',
                message: data.msg,
                type: 'error',
              });
            }
          });
    },
    opensetpage(item) {
      this.$get(this.$otherApi + '/elevator_params/get_base_mch_info', { mch_id: item.id })
          .then((data) => {
            if (data.code === 0) {
              this.setpagedialog = true;
              if (data.data.other_params !== null) {
                if (data.data.other_params.set_type === undefined || data.data.other_params.set_type === null) {
                  this.setpagedialogform.set_type = 0
                } else {
                  this.setpagedialogform.set_type = data.data.other_params.set_type
                }
                switch (this.setpagedialogform.set_type) {
                  case 0:
                    this.setpagedialogform = {
                      set_type: 0,
                      one: data.data.other_params.ONE,//每层的高度位置
                      two: data.data.other_params.TWO,//每层的高度位置
                      three: data.data.other_params.THREE,//每层的高度位置
                      four: data.data.other_params.FOUR,//每层的高度位置
                      five: data.data.other_params.FIVE,//每层的高度位置
                      six: data.data.other_params.SIX,//每层的高度位置
                      hR_ONE: data.data.other_params.HR_ONE,//每层的水平位置
                      hR_TWO: data.data.other_params.HR_TWO,//每层的水平位置
                      hR_THREE: data.data.other_params.HR_THREE,//每层的水平位置
                      hR_FOUR: data.data.other_params.HR_FOUR,//每层的水平位置
                      hR_FIVE: data.data.other_params.HR_FIVE,//每层的水平位置
                      hR_SIX: data.data.other_params.HR_SIX,//每层的水平位置
                      hR_SEVEN: data.data.other_params.HR_SEVEN,//每层的水平位置
                      hR_EIGHT: data.data.other_params.HR_EIGHT,//每层的水平位置
                      hR_NINE: data.data.other_params.HR_NINE,//每层的水平位置
                      hR_TEN: data.data.other_params.HR_TEN,//每层的水平位置
                      door_ver_dis: data.data.other_params.door_ver_dis,//门的垂直距离
                      door_hor_dis: data.data.other_params.door_hor_dis,//门的水平探出距离
                      isdropcheck: data.data.other_params.isdropcheck,//是否关闭掉货检测
                      door_closetime: data.data.other_params.door_closetime,//关门的倒计时
                      fault_tolerance: data.data.other_params.fault_tolerance,//容错步数
                      total_step: data.data.other_params.total_step,//总的上下步数
                    }
                    break;
                  case 1:
                    this.setpagedialogform = {
                      set_type: 1,
                      oneFloorStep: data.data.other_params.oneFloorStep,
                      twoFloorStep: data.data.other_params.twoFloorStep,
                      threeFloorStep: data.data.other_params.threeFloorStep,
                      fourFloorStep: data.data.other_params.fourFloorStep,
                      fiveFloorStep: data.data.other_params.fiveFloorStep,
                      sixFloorStep: data.data.other_params.sixFloorStep,
                      outGoodsWindowsStep: data.data.other_params.outGoodsWindowsStep,
                    }
                    break;
                  case 2:
                    this.setpagedialogform = {
                      set_type: 2,
                      one: data.data.other_params.ONE,//每层的高度位置
                      two: data.data.other_params.TWO,//每层的高度位置
                      three: data.data.other_params.THREE,//每层的高度位置
                      four: data.data.other_params.FOUR,//每层的高度位置
                      five: data.data.other_params.FIVE,//每层的高度位置
                      six: data.data.other_params.SIX,//每层的高度位置
                      hR_ONE: data.data.other_params.HR_ONE,//每层的水平位置
                      hR_TWO: data.data.other_params.HR_TWO,//每层的水平位置
                      hR_THREE: data.data.other_params.HR_THREE,//每层的水平位置
                      hR_FOUR: data.data.other_params.HR_FOUR,//每层的水平位置
                      hR_FIVE: data.data.other_params.HR_FIVE,//每层的水平位置
                      hR_SIX: data.data.other_params.HR_SIX,//每层的水平位置
                      hR_SEVEN: data.data.other_params.HR_SEVEN,//每层的水平位置
                      hR_EIGHT: data.data.other_params.HR_EIGHT,//每层的水平位置
                      hR_NINE: data.data.other_params.HR_NINE,//每层的水平位置
                      hR_TEN: data.data.other_params.HR_TEN,//每层的水平位置
                      door_ver_dis: data.data.other_params.door_ver_dis,//门的垂直距离
                      door_hor_dis: data.data.other_params.door_hor_dis,//门的水平探出距离
                      isdropcheck: data.data.other_params.isdropcheck,//是否关闭掉货检测
                      door_closetime: data.data.other_params.door_closetime,//关门的倒计时
                      fault_tolerance: data.data.other_params.fault_tolerance,//容错步数
                      total_step: data.data.other_params.total_step,//总的上下步数
                    }
                    break;
                }
              }
              this.setpagedialogform.mchid = item.id;
            } else {
              this.$notify({
                title: '提示',
                message: data.msg,
                type: 'error',
              });
            }
          })
    },
    setpagedialogbtn() {
      this.$refs['setpagedialogform'].validate((valid) => {
        if (valid) {
          var url = ''
          switch (this.setpagedialogform.set_type) {
            case 0:
              url = this.$otherApi + '/elevator_params/set_elevator_params'
              break;
            case 1:
              url = this.$otherApi + '/elevator_params/set_base_elevator_params'
              break;
            case 2:
              url = this.$otherApi + '/elevator_params/set_elevator_params'
              break;
          }
          this.$post(url, this.setpagedialogform)
              .then((data) => {
                if (data.code === 0) {
                  this.$notify({
                    title: '提示',
                    message: data.msg,
                    type: 'success',
                  });
                  this.LoadData();
                  this.setpagedialog = false;
                } else {
                  this.$notify({
                    title: '提示',
                    message: data.msg,
                    type: 'error',
                  });
                }
              })
        }
      })
    },
    clearsetpagedialogform() {
      this.setpagedialogform = {
        set_type: '',//升降机类型
        mchid: '',//机器id
        one: '',//每层的高度位置set_type===0或2
        two: '',//每层的高度位置set_type===0或2
        three: '',//每层的高度位置set_type===0或2
        four: '',//每层的高度位置set_type===0或2
        five: '',//每层的高度位置set_type===0或2
        six: '',//每层的高度位置set_type===0或2
        hR_ONE: '',//每层的水平位置set_type===0或2
        hR_TWO: '',//每层的水平位置set_type===0或2
        hR_THREE: '',//每层的水平位置set_type===0或2
        hR_FOUR: '',//每层的水平位置set_type===0或2
        hR_FIVE: '',//每层的水平位置set_type===0或2
        hR_SIX: '',//每层的水平位置set_type===0或2
        hR_SEVEN: '',//每层的水平位置set_type===0或2
        hR_EIGHT: '',//每层的水平位置set_type===0或2
        hR_NINE: '',//每层的水平位置set_type===0或2
        hR_TEN: '',//每层的水平位置set_type===0或2
        door_ver_dis: '',//门的垂直距离set_type===0或2
        door_hor_dis: '',//门的水平探出距离set_type===0或2
        isdropcheck: true,//是否关闭掉货检测set_type===0或2
        door_closetime: '',//关门的倒计时set_type===0或2
        fault_tolerance: '',//容错步数set_type===0或2
        total_step: '',//总的上下步数set_type===0或2
        oneFloorStep: '',//一层步数set_type===1
        twoFloorStep: '',//二层步数set_type===1
        threeFloorStep: '',//三层步数set_type===1
        fourFloorStep: '',//四层步数set_type===1
        fiveFloorStep: '',//五层步数set_type===1
        sixFloorStep: '',//六层步数set_type===1
        outGoodsWindowsStep: '',//出货口步数set_type===1
      }
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.LoadData();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.LoadData();
    },
  }
}
;
</script>
